<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>省市县三级联动案例</title>
	<link rel="stylesheet" href="./css/index.css" />
</head>

<body>
	<div class="list-box">
		<div class="item">
			<span>省份：</span>
			<select id="province">
				<option value="">请选择省份</option>
			</select>
		</div>
		<div class="item">
			<span>城市：</span>
			<select id="city">
				<option value="">请选择城市</option>
			</select>
		</div>
		<div class="item">
			<span>区县：</span>
			<select id="county">
				<option value="">请选择区县</option>
			</select>
		</div>
	</div>
</body>
<script src="./js/index.js"></script>
<script src="../axios.js"></script>
<script>
	const province = document.querySelector('#province')
	const city = document.querySelector('#city')
	const county = document.querySelector('#county')
	//配置根路径
	axios.defaults.baseURL = 'http://124.223.14.236:3001/api'
	//默认省县市

	async function init1() {
		const { data: { data: item } } = await axios.get('/city/province')
		const provinceStr = item.map((res) => `<option value="${res.province}">${res.name}</option>`
			// console.log(res);
		).join('')
		// 渲染
		province.innerHTML = '<option value="">请选择省份</option>' + provinceStr
		//默认指定
	}
	async function init2(provinceCode) {
		const { data: { data: item } } = await axios.get('/city/province')
		const { data: { data: item1 } } = await axios.get('/city/city', {
			params: { provinceCode }
		})
		const cityStr = item1.map((res) => `<option value="${res.city}">${res.name}</option>`
			// console.log(res);
		).join('')
		// 渲染
		city.innerHTML = '<option value="">请选择城市</option>' + cityStr
	}
	async function init3(provinceCode, cityCode) {
		const { data: { data: item2 } } = await axios.get('/city/area', {
			params: {
				provinceCode,
				cityCode
			}
		})
		const countyStr = item2.map((res) => `<option value="${res.area}">${res.name}</option>`
			// console.log(res);
		).join('')
		// 渲染
		county.innerHTML = '<option value="">请选择区县</option>' + countyStr
	}


	async function fn() {
		// 省
		// const { data: { data: item } } = await axios.get('/city/province')
		// const provinceStr = item.map((res) => `<option value="${res.province}">${res.name}</option>`
		// 	// console.log(res);
		// ).join('')
		// // 渲染
		// province.innerHTML = '<option value="">请选择省份</option>' + provinceStr
		await init1()
		//默认指定
		province.value = 34

		// 市
		// const { data: { data: item1 } } = await axios.get('/city/city', {
		// 	params: { provinceCode: '34' }
		// })
		// const cityStr = item1.map((res) => `<option value="${res.city}">${res.name}</option>`
		// 	// console.log(res);
		// ).join('')
		// // 渲染
		// city.innerHTML = '<option value="">请选择城市</option>' + cityStr

		await init2('34')
		//默认指定
		city.value = '01'

		// 区
		// const { data: { data: item2 } } = await axios.get('/city/area', {
		// 	params: {
		// 		provinceCode: '34',
		// 		cityCode: '01'
		// 	}
		// })
		// const countyStr = item2.map((res) => `<option value="${res.area}">${res.name}</option>`
		// 	// console.log(res);
		// ).join('')
		// // 渲染
		// county.innerHTML = '<option value="">请选择区县</option>' + countyStr
		await init3('34', '01')
		//默认指定
		county.value = '02'
	}
	fn()

	// 运用change事件
	///省发生
	province.addEventListener('change', async function () {
		// const { data: { data: item1 } } = await axios.get('/city/city', {
		// 	params: { provinceCode: province.value }
		// })
		// const cityStr = item1.map((res) => `<option value="${res.city}">${res.name}</option>`
		// 	// console.log(res);
		// ).join('')
		// // 渲染
		// city.innerHTML = '<option value="">请选择城市</option>' + cityStr

		await init2(province.value)

		county.innerHTML = '<option value="">请选择区县</option>'
	})

	//市发生
	city.addEventListener('change', async function () {
		// const { data: { data: item2 } } = await axios.get('/city/area', {
		// 	params: {
		// 		provinceCode: province.value,
		// 		cityCode: city.value
		// 	}
		// })
		// const countyStr = item2.map((res) => `<option value="${res.area}">${res.name}</option>`
		// 	// console.log(res);
		// ).join('')
		// // 渲染

		await init3(province.value, city.value)

	}) 
</script>

</html>